<template>
  <el-scrollbar class="data-tab-pane">
    <codemirror
        v-model="categoryDataJson"
        placeholder="Code gose here..."
        :lineNumbers="true"
        :lineWrapping="true"
        :autoFormatOnLoad="true"
        :extensions="extensions"
    />
  </el-scrollbar>
</template>

<script setup>
import {Codemirror} from "vue-codemirror";
import {json} from "@codemirror/lang-json";
import {oneDark} from "@codemirror/theme-one-dark";
import {ref, watch} from "vue";

const {modelValue} = defineProps(['modelValue']);

const extensions = [json(), oneDark];

const categoryDataJson = ref('');
watch(modelValue, (n, o) => {
  categoryDataJson.value = JSON.stringify(n, null, 2);
}, {
  immediate: true
});

watch(categoryDataJson, (n, o) => {
  const data = JSON.parse(n);
  Object.assign(modelValue, data)
})

</script>

<script>
export default {
  name: "SillyCategoryJsonEdit",
  props: {modelValue: {}}
}
</script>

<style scoped>
.data-tab-pane {
  width: 100%;
  height: calc(100vh - 140px);
}
</style>